import { defineComponent, reactive } from "vue";
import styles from "./Applicant.module.scss";
import SignRow from "../SignRow/SignRow";
import { IconFont } from '@nutui/icons-vue';
export default defineComponent({
  props: {
    form: {
      type: Object,
    },
    id_types: {
      type: Object,
    },
    areas: {
      type: Object,
    },
  },
  setup(props: any) {
    return () => (
      <>
        <div class={styles.applicant}>
          <SignRow label="姓名">
            <nut-input border={false} class={styles['sign-input']} v-model={props.form.applicant.name} placeholder="请输入姓名" />
            <div onClick={() => { props.form.applicant.name = '' }} v-show={props.form.applicant.name}>
              <IconFont name="mask-close" color="#bbb" style={{ margin: '0 5px' }} />
            </div>
          </SignRow>
          <SignRow
            label="证件类型"
          >
            <nut-input
              readonly
              border={false}
              class={styles['sign-input']}
              modelValue={props.id_types.list?.find?.((x: any) => x.value === props.form.applicant.id_type)?.text || ''}
              placeholder="请选择缴费人证件类型"
              onClick={() => {
                props.id_types.insured_idx = '';
                props.id_types.value = props.form.applicant.id_type ? [props.form.applicant.id_type] : [];
                props.id_types.isShow = true
              }}
            />
          </SignRow>
          <SignRow
            label="证件号码"
            onLabelClick={() => { }}
          >
            <nut-input border={false} onBlur={() => { props.form.applicant.id_no = props.form.applicant.id_no.toUpperCase() }} max-length={18} class={[styles['sign-input'], styles.uppercase]} v-model={props.form.applicant.id_no} placeholder="请输入证件号码" />
            <div onClick={() => { props.form.applicant.id_no = '' }} v-show={props.form.applicant.id_no}>
              <IconFont name="mask-close" color="#bbb" style={{ margin: '0 5px' }} />
            </div>
          </SignRow>
          <SignRow
            label="所在县(市、区)"
          >
            <nut-input
              readonly
              border={false}
              class={styles['sign-input']}
              modelValue={props.areas.list?.find?.((x: any) => x.id === props.form.applicant.area_id)?.name || ''}
              placeholder="请选择缴费人所在县(市、区)"
              onClick={() => {
                props.areas.insured_idx = '';
                props.areas.value = props.form.applicant.area_id ? [props.form.applicant.area_id] : [];
                props.areas.isShow = true
              }}
            />
            <div onClick={() => { props.form.applicant.area_id = '' }} v-show={props.form.applicant.area_id}>
              <IconFont name="mask-close" color="#bbb" style={{ margin: '0 5px' }} />
            </div>
          </SignRow>
          <SignRow label="手机号">
            <nut-input border={false} type="number" max-length={11} class={styles['sign-input']} v-model={props.form.applicant.mobile} placeholder="请输入手机号" />
            <div onClick={() => { props.form.applicant.mobile = '' }} v-show={props.form.applicant.mobile}>
              <IconFont name="mask-close" color="#bbb" style={{ margin: '0 5px' }} />
            </div>
          </SignRow>
        </div>
        <nut-popup position="bottom" v-model:visible={props.id_types.isShow}>
          <nut-picker v-model={props.id_types.value} columns={props.id_types.list} title="请选择证件类型"
            onConfirm={(e: any) => {
              if (props.id_types.insured_idx === '') {
                props.form.applicant.id_type = e.selectedOptions?.[0]?.value || '';
              } else {
                props.form.insured[props.id_types.insured_idx].id_type = e.selectedOptions?.[0]?.value || '';
              }
              props.id_types.isShow = false;
            }}
            onCancel={() => props.id_types.isShow = false}
          >
          </nut-picker>
        </nut-popup>
        <nut-popup position="bottom" v-model:visible={props.areas.isShow}>
          <nut-picker field-names={{ text: 'name', value: 'id' }} v-model={props.areas.value} columns={props.areas.list} title="请选择区县"
            onConfirm={(e: any) => {
              if (props.areas.insured_idx === '') {
                props.form.applicant.area_id = e.selectedOptions?.[0]?.id || '';
              } else {
                props.form.insured[props.areas.insured_idx].area_id = e.selectedOptions?.[0]?.id || '';
              }
              props.areas.isShow = false;
            }}
            onCancel={() => props.areas.isShow = false}
          >
          </nut-picker>
        </nut-popup>
      </>
    )
  }
})